<template>
  <view class="flex-tab-top">
    <view class="flex-item" :class="sortField == 1 ? 'activeItem' : ''" @click="setSortFn('default')">默认</view>
    <view class="flex-item" :class="sortField == 2 ? 'activeItem' : ''" @click="setSortFn()">价格排序<image :src="price_sort_icon[sortIndex]" class="icon_price" /></view>
    <view class="flex-item" :class="sortField == 3 ? 'activeItem' : ''" @click="openClassification()">{{ showClickName }}<span class="icon font_family icon-quanbufenlei_tongyong_1" /></view>

  </view>
</template>

<script>
export default {
  name: 'Index',
  props: {
    priceSort: {
      type: Number,
      default: null
    },
    clickName: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      sortField: 1, // 1-默认， 2-价格
      // showClickName: '全部分类',
      price_sort_icon: [
        '/static/image/price_default.png', //价格排序默认图标
        '/static/image/price_desc.png', // 价格排序降序图标
        '/static/image/price_asc.png', // 价格排序升序图标
      ],
      sortIndex: 0, //价格排序当前的排序下标
      sortParams: [0, 1, 2], //价格排序的入参 0：默认，1：价格由高到低，2：价格由低到高"
      searchParams: {
        orderType: null,
      },
      defaultSearchParams: {
        orderType: null,
      }
    }
  },
  computed: {
    curPriceSort() {
      return this.priceSort
    },
    showClickName() {
      return this.clickName
    },
  },
  mounted() {
    this.sortIndex = this.sortParams.indexOf(this.curPriceSort)
  },
  methods: {
    setSortFn(param) {
      this.sortShow = true
      if (param == 'default') {
        this.searchParams = this.defaultSearchParams
        this.sortIndex = 0
        this.sortField = 1
      } else {
        this.sortField = 2
        if (this.sortIndex == 2) {
          this.sortIndex = 1
          // this.sortField = 1
        } else {
          this.sortIndex++
        }
      }
      this.searchParams.orderType = this.sortParams[this.sortIndex]
      this.searchFilterFn()
    },
    searchFilterFn() {
      this.$emit('searchFilterFn', this.searchParams)
    },

    openClassification() {
      this.$emit('openClassification')
    }
  }
}
</script>

<style scoped lang="scss">
.flex-tab-top{
  height: 88rpx;
  line-height: 88rpx;
  background:$uni-bg-color;
  display:flex;
  flex-direction:row;
  position: fixed;
  width: 100%;
  z-index: 99;
  /* #ifdef MP-WEIXIN || MP-ALIPAY */
  top:88rpx;
  /* #endif */
  /* #ifdef H5 */
  top:176rpx;
  /* #endif */
  .activeItem{
    color: $uni-orange;
    font-weight: bold;
  }
  .flex-item{
    width: 33.3%;
    text-align: center;
    font-size: $uni-font-size-base;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .icon_price{
      width: 32rpx;
      height: 32rpx;
      overflow: hidden;
      position: relative;
      margin: 0 0 0 14rpx;
      top:4px;
    }
    .icon_screen{
      width: 32rpx;
      height: 32rpx;
      overflow: hidden;
      position: relative;
      top:3px;
    }
    .font_family{
      font-size: 17px;
      margin: 0 0 0 14rpx;
      position:relative;
      top:3rpx;
    }
  }
}

</style>
